<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="width*=1.1">放大10%</button>
			<button @click="width*=0.9">缩小10%</button>
			{{msg}}<br>
			<img :width="Window" src="img/t03.jpg" alt=""/>
			<input v-model="msg" type="text"/>
			<hr>
			{{a}}是
			<span v-if="a%2 == 0"></span>
			<span v-else>奇数</span>
			
			{{a}}是{{a%2==0?"偶数":"奇数"}}
			<hr>
			姓名：{{student.name}} 年龄：{{student.age}}
			<p>
				{{student.name}}是  
				<b v-if='student.age >= 18'>成年人</b>
				<b v-else>未成年人</b>
				<!-- 三元运算符：条件？结果1：结果2 -->
				{{student.age >=18?"成年人":"未成年人"}}
			</p>
		</div>
		<script>
			const app=Vue.createApp({
				data(){
					return{
						window:200,
						msg:'hellow vue',
						a:6,
						student:{
							name:"张三",
							age:16,
						}
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>